/**
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * Project: Hilmacorp.ai — Web Platform
 * File: app/[locale]/apps/page.tsx
 * Description: Apps page — web platforms (AI Risk Index, LLM Index) and the Zyquo family
 *              of native macOS applications with direct DMG downloads
 */

import type { Metadata } from "next";
import Container from "@/components/Container";
import SectionHeading from "@/components/SectionHeading";
import { getMessages, isLocale, type Locale } from "@/lib/i18n";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  if (!isLocale(locale)) return {};
  const { meta } = getMessages(locale);
  return { title: { absolute: meta.apps.title }, description: meta.apps.description };
}

function CheckIcon() {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      aria-hidden="true"
      className="mt-0.5 shrink-0"
    >
      <path
        d="M3 8.5l3.2 3L13 4.5"
        stroke="#0b6b4a"
        strokeWidth="1.8"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export default async function AppsPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const { apps } = getMessages(locale as Locale);

  return (
    <>
      <section className="relative overflow-hidden border-b border-line">
        <div className="grid-backdrop absolute inset-0" aria-hidden="true" />
        <Container className="relative py-20 sm:py-28">
          <SectionHeading as="h1" title={apps.title} lead={apps.lead} />
        </Container>
      </section>

      {/* Web platforms */}
      <section className="py-16 sm:py-20">
        <Container>
          <SectionHeading title={apps.webTitle} lead={apps.webLead} />
          <div className="mt-10 grid gap-6 lg:grid-cols-2">
            {apps.web.map((app) => (
              <article
                key={app.id}
                className="flex flex-col rounded-3xl border border-line bg-card p-8 shadow-sm sm:p-10"
              >
                <p className="font-mono text-xs uppercase tracking-[0.2em] text-ink-faint">
                  {app.urlLabel}
                </p>
                <h3 className="mt-3 font-display text-2xl font-semibold tracking-tight text-ink">
                  {app.name}
                </h3>
                <p className="mt-2 font-medium text-accent">{app.tagline}</p>
                <p className="mt-4 leading-relaxed text-ink-soft">{app.description}</p>
                <ul className="mt-6 grid gap-2.5">
                  {app.points.map((point) => (
                    <li key={point} className="flex items-start gap-2.5 text-sm text-ink">
                      <CheckIcon />
                      {point}
                    </li>
                  ))}
                </ul>
                <div className="mt-8 flex-1" />
                <a
                  href={app.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex w-fit items-center gap-2 rounded-full bg-ink px-6 py-2.5 text-sm font-medium text-paper transition-colors hover:bg-accent-strong"
                >
                  {apps.visit}
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
                    <path
                      d="M4 10L10 4M10 4H5.5M10 4v4.5"
                      stroke="currentColor"
                      strokeWidth="1.6"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                </a>
              </article>
            ))}
          </div>
        </Container>
      </section>

      {/* macOS apps */}
      <section className="border-t border-line bg-paper-2 py-16 sm:py-20">
        <Container>
          <SectionHeading title={apps.macTitle} lead={apps.macLead} />
          <div className="mt-10 grid gap-6 lg:grid-cols-2">
            {apps.mac.map((app) => (
              <article
                key={app.id}
                className="flex flex-col rounded-3xl border border-line bg-card p-8 shadow-sm sm:p-10"
              >
                <p className="font-mono text-xs uppercase tracking-[0.2em] text-ink-faint">
                  {app.requires}
                </p>
                <h3 className="mt-3 font-display text-2xl font-semibold tracking-tight text-ink">
                  {app.name}
                </h3>
                <p className="mt-2 font-medium text-accent">{app.tagline}</p>
                <p className="mt-4 leading-relaxed text-ink-soft">{app.description}</p>
                <ul className="mt-6 grid gap-2.5">
                  {app.points.map((point) => (
                    <li key={point} className="flex items-start gap-2.5 text-sm text-ink">
                      <CheckIcon />
                      {point}
                    </li>
                  ))}
                </ul>
                <div className="mt-8 flex-1" />
                <div className="flex flex-wrap items-center gap-4">
                  <a
                    href={`/downloads/${app.file}`}
                    download
                    className="inline-flex items-center gap-2 rounded-full bg-ink px-6 py-2.5 text-sm font-medium text-paper transition-colors hover:bg-accent-strong"
                  >
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
                      <path
                        d="M7 1.5v8m0 0L3.8 6.3M7 9.5l3.2-3.2M2 12.5h10"
                        stroke="currentColor"
                        strokeWidth="1.6"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                    </svg>
                    {apps.download}
                  </a>
                  <span className="font-mono text-xs text-ink-faint">{app.size}</span>
                </div>
              </article>
            ))}
          </div>
          <p className="mt-10 text-sm text-ink-faint">{apps.macNote}</p>
        </Container>
      </section>
    </>
  );
}